<template>
  <div class="container">
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col>
        <el-form :inline="true" :model="page" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input
              v-model="page.subjectName"
              size="200"
              ref="input"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="cls">清除</el-button>
            <el-button type="primary" @click="getList">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col>
        <el-row type="flex" justify="end">
          <el-button type="success" class="el-icon-edit" @click="isShowDialog">
            新增学科</el-button
          >
        </el-row>
      </el-col>
    </el-row>
    <div class="warning">
      <i class="el-icon-info"></i>
      共{{ counts }}条数据
    </div>
    <el-table :data="list" style="width: 100%" class="table">
      <el-table-column prop="date" label="序号" type="index"> </el-table-column>
      <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
      <el-table-column prop="username" label="创建者"> </el-table-column>
      <el-table-column prop="addDate" label="创建日期">
        <template slot-scope="{ row }">{{
          row.addDate | parseTimeByString("{y}-{m}-{d}")
        }}</template>
      </el-table-column>
      <el-table-column
        prop="isFrontDisplay"
        label="前台是否显示"
        :formatter="formatEmployment"
      />

      <el-table-column prop="twoLevelDirectory" label="二级目录" width>
      </el-table-column>
      <el-table-column prop="tags" label="标签"> </el-table-column>
      <el-table-column prop="totals" label="题目数量"> </el-table-column>

      <el-table-column prop="address" label="操作" width="215">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="small"
            @click="
              $router.push({
                path: 'directorys',
                query: {
                  id: row.id,
                  directoryName: row.subjectName
                }
              })
            "
            >学科分类</el-button
          >
          <el-button type="text" size="small">学科标签</el-button>
          <el-button
            type="text"
            size="small"
            @click="showDia(row.subjectName, row.isFrontDisplay, row.id)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="delet(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-col :span="10">
        <el-pagination
          @current-change="changePage"
          background
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="prev, pager, next, sizes , jumper"
          :total="counts"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      title="新增学科"
      :visible="isShow"
      width="30%"
      center
      @close="btnCancle"
    >
      <el-form
        label-width="80px"
        :model="formvalue"
        :rules="rules"
        ref="formRules"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            placeholder="请输入学科名称"
            v-model="formvalue.subjectName"
          />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            @change="switchChange"
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="formvalue.isFrontDisplay"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancle">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
    <subjects-update
      :isShow.sync="showDialog"
      :updataProps="updataProps"
      @list="getList"
    />
  </div>
</template>

<script>
import { list, add, remove } from "../../api/hmmm/subjects";
import SubjectsUpdate from "../components/subjects-update";
export default {
  data() {
    return {
      formvalue: {
        subjectName: "",
        isFrontDisplay: true
      },
      counts: 0,
      list: [],
      page: {
        subjectName: "",
        page: 1, // 当前页码
        size: 10
      },
      formInline: {
        user: "",
        region: ""
      },
      updataProps: {
        subjectName: "",
        isFrontDisplay: "",
        id: ""
      },
      isShow: false,
      showDialog: false,
      rules: {
        subjectName: [
          { required: true, message: "请输入学科名称", trigger: "blur" }
        ]
      }
    };
  },
  components: {
    SubjectsUpdate
  },
  created() {
    this.getList();
  },
  methods: {
    cls() {
      this.page.subjectName = "";
    },
    formatEmployment(row, column, cellValue, index) {
      return cellValue == 1 ? "是" : "否";
    },
    async getList() {
      const { data } = await list(this.page);
      this.counts = data.counts;
      console.log(this.counts);
      this.list = data.items;
      console.log(this.list);
    },
    cls() {
      this.page.subjectName = "";
    },
    changePage(newPage) {
      this.page.page = newPage;
      this.getList();
    },
    onSubmit() {
      console.log("submit!");
    },
    isShowDialog() {
      this.isShow = true;
    },
    switchChange() {
      !this.formvalue.isFrontDisplay;
    },
    async btnOk() {
      try {
        await this.$refs.formRules.validate();
        await add(this.formvalue);
        this.$message.success("添加成功");
        this.isShow = false;
        this.getList();
      } catch (err) {
        console.log(err);
      }
    },
    btnCancle() {
      this.formvalue = {
        subjectName: "",
        isFrontDisplay: true
      };
      this.$refs.formRules.resetFields();
      this.isShow = false;
    },
    showDia(subjectName, isFrontDisplay, id) {
      this.showDialog = true;
      (this.updataProps.subjectName = subjectName),
        (this.updataProps.isFrontDisplay = isFrontDisplay == 1 ? true : false);
      this.updataProps.id = id;
      console.log(this.updataProps);
    },
    async delet(row) {
      await this.$confirm("确定删除该学科吗？");
      await remove(row);
      this.$message.success("删除成功");
      this.getList();
    }
  }
};
</script>

<style scoped lang="css">
.container {
  padding: 30px;
  background-color: #fff;
}
.warning {
  margin-bottom: 15px;
  width: 100%;
  height: 35px;
  background-color: rgb(247, 245, 246);
  border-radius: 3px;
  line-height: 35px;
  font-size: 9px;
  color: rgb(194, 193, 193);
}
.table {
  margin: 20px 0;
}
</style>
